<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" class="file" name="file" multiple="multiple" />
    <script>
         const getBase64Image = function (img) {
            const canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext("2d");
            console.log(img.files)
            console.log(ctx)
          
            console.log(img)
            ctx.drawImage(img, 0, 0, img.width, img.height);
            //var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); 
            //var dataURL = canvas.toDataURL("image/"+ext); 
            const dataURL = canvas.toDataURL("image/png");
            return dataURL;
        }
        ;
        document.querySelector('.file').addEventListener('change', function (e) {
            let files = e.target.files;
            console.log(files);
            if (!files.length) return;
            // 上传文件 创建FormData
            let formData = new FormData();
            // 遍历FileList对象，拿到多个图片对象
            for (let i = 0; i < files.length; i++) {
                // formData中的append方法 如果已有相同的键，则会追加成为一个数组  注意:这里需要使用formData.getAll()获取
                formData.append('upFile', files[i], files[i].name);
            }
            console.log(formData.getAll('upFile'))
            // 将formdata发送到后台即可
            // 我用的 axios.post('url', formData)
            
            
            // let img = document.querySelector('.file');
            let arr = [];
            arr.push(formData.getAll('upFile'));
            let arrURL = [];
            for (let i = 0; i < arr[0].length; i++) {
                arrURL.push(getObjectURL(arr[0][i]));
                console.log(123)
            }
          
            console.log(arrURL);

            for (let i = 0,len = arrURL.length; i < len; i++) {
                const image = new Image();

                image.src = arrURL[i];
                // let base64 = getBase64Image(image);
                // console.log(base64)
                console.log(image)
                document.body.appendChild(image);
            }
           


        });
        function getObjectURL(file) {
    var url = null;
    if (window.createObjcectURL != undefined) {
      url = window.createOjcectURL(file);
    } else if (window.URL != undefined) {
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }



    </script>
</body>

</html>